<template>
  <div class="delta-items-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <span class="title-icon">🎯</span>
          《三角洲行动》物品价格
        </h1>
        <p class="page-subtitle">实时价格追踪 · 市场行情分析 · 交易指南</p>
      </div>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-section">
      <div class="filter-container">
        <div class="filter-group">
          <label class="filter-label">物品类型</label>
          <select v-model="selectedType" class="filter-select">
            <option value="">全部类型</option>
            <option value="weapon">武器</option>
            <option value="armor">防具</option>
            <option value="consumable">消耗品</option>
            <option value="cosmetic">装饰品</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label class="filter-label">稀有度</label>
          <select v-model="selectedRarity" class="filter-select">
            <option value="">全部稀有度</option>
            <option value="common">普通</option>
            <option value="rare">稀有</option>
            <option value="epic">史诗</option>
            <option value="legendary">传说</option>
          </select>
        </div>

        <div class="filter-group">
          <label class="filter-label">价格范围</label>
          <div class="price-range">
            <input 
              v-model="priceRange.min" 
              type="number" 
              placeholder="最低价" 
              class="price-input"
            >
            <span class="price-separator">-</span>
            <input 
              v-model="priceRange.max" 
              type="number" 
              placeholder="最高价" 
              class="price-input"
            >
          </div>
        </div>

        <button class="filter-reset" @click="resetFilters">重置筛选</button>
      </div>
    </div>

    <!-- 物品网格 -->
    <div class="items-grid">
      <div 
        v-for="item in filteredItems" 
        :key="item.id" 
        class="item-card"
        :class="`rarity-${item.rarity}`"
      >
        <div class="item-image">
          <img :src="item.image" :alt="item.name" class="item-img">
          <div class="rarity-badge" :class="`rarity-${item.rarity}`">
            {{ getRarityText(item.rarity) }}
          </div>
        </div>
        
        <div class="item-info">
          <h3 class="item-name">{{ item.name }}</h3>
          <p class="item-description">{{ item.description }}</p>
          
          <div class="item-stats">
            <div class="stat-item">
              <span class="stat-label">类型:</span>
              <span class="stat-value">{{ getTypeText(item.type) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">等级:</span>
              <span class="stat-value">{{ item.level }}</span>
            </div>
          </div>

          <div class="price-section">
            <div class="current-price">
              <span class="price-label">当前价格</span>
              <span class="price-value">¥{{ item.currentPrice.toLocaleString() }}</span>
            </div>
            
            <div class="price-change" :class="getPriceChangeClass(item.priceChange)">
              <span class="change-icon">{{ getPriceChangeIcon(item.priceChange) }}</span>
              <span class="change-value">{{ Math.abs(item.priceChange) }}%</span>
            </div>
          </div>

          <div class="item-actions">
            <button class="btn btn-primary">查看详情</button>
            <button class="btn btn-secondary">加入收藏</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">
        上一页
      </button>
      <span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
      <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const selectedType = ref('')
const selectedRarity = ref('')
const priceRange = ref({ min: '', max: '' })
const currentPage = ref(1)
const itemsPerPage = 12

// 模拟物品数据
// 生成本地SVG图片的函数
const generateItemImage = (text, bgColor = '#4a90e2', textColor = 'white') => {
  return `data:image/svg+xml;base64,${btoa(`
    <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
      <rect width="100%" height="100%" fill="${bgColor}"/>
      <text x="50%" y="50%" text-anchor="middle" dy=".3em" 
            fill="${textColor}" font-family="Arial, sans-serif" 
            font-size="16" font-weight="bold">
        ${text}
      </text>
    </svg>
  `)}`
}

const items = ref([
  {
    id: 1,
    name: 'M4A1',
    description: '经典突击步枪，平衡的伤害和射速',
    type: 'weapon',
    rarity: 'epic',
    level: 25,
    currentPrice: 12500,
    priceChange: 5.2,
    image: generateItemImage('M4A1', '#4a90e2', 'white')
  },
  {
    id: 2,
    name: '战术防弹衣',
    description: '提供优秀的防护能力',
    type: 'armor',
    rarity: 'rare',
    level: 20,
    currentPrice: 8500,
    priceChange: -2.1,
    image: generateItemImage('防弹衣', '#50c878', 'white')
  },
  {
    id: 3,
    name: '医疗包',
    description: '快速恢复生命值',
    type: 'consumable',
    rarity: 'common',
    level: 15,
    currentPrice: 1200,
    priceChange: 0.8,
    image: generateItemImage('医疗包', '#ff6b6b', 'white')
  },
  {
    id: 4,
    name: '黄金AK47',
    description: '稀有金色涂装，收藏价值极高',
    type: 'weapon',
    rarity: 'legendary',
    level: 30,
    currentPrice: 25000,
    priceChange: 12.5,
    image: generateItemImage('黄金AK47', '#ffd700', 'black')
  },
  {
    id: 5,
    name: '夜视仪',
    description: '夜间作战必备装备',
    type: 'armor',
    rarity: 'epic',
    level: 22,
    currentPrice: 9800,
    priceChange: -1.5,
    image: generateItemImage('夜视仪', '#8b4513', 'white')
  },
  {
    id: 6,
    name: '能量饮料',
    description: '临时提升移动速度',
    type: 'consumable',
    rarity: 'common',
    level: 10,
    currentPrice: 800,
    priceChange: 3.2,
    image: generateItemImage('能量饮料', '#ff4500', 'white')
  },
  {
    id: 7,
    name: '狙击镜',
    description: '提升狙击精度',
    type: 'weapon',
    rarity: 'rare',
    level: 18,
    currentPrice: 6500,
    priceChange: -0.5,
    image: generateItemImage('狙击镜', '#696969', 'white')
  },
  {
    id: 8,
    name: '迷彩服',
    description: '提供伪装效果',
    type: 'cosmetic',
    rarity: 'rare',
    level: 12,
    currentPrice: 3200,
    priceChange: 1.8,
    image: generateItemImage('迷彩服', '#228b22', 'white')
  }
])

// 计算属性
const filteredItems = computed(() => {
  let filtered = items.value

  if (selectedType.value) {
    filtered = filtered.filter(item => item.type === selectedType.value)
  }

  if (selectedRarity.value) {
    filtered = filtered.filter(item => item.rarity === selectedRarity.value)
  }

  if (priceRange.value.min !== '') {
    filtered = filtered.filter(item => item.currentPrice >= Number(priceRange.value.min))
  }

  if (priceRange.value.max !== '') {
    filtered = filtered.filter(item => item.currentPrice <= Number(priceRange.value.max))
  }

  return filtered
})

const totalPages = computed(() => Math.ceil(filteredItems.value.length / itemsPerPage))

// 方法
const resetFilters = () => {
  selectedType.value = ''
  selectedRarity.value = ''
  priceRange.value = { min: '', max: '' }
  currentPage.value = 1
}

const getRarityText = (rarity) => {
  const rarityMap = {
    common: '普通',
    rare: '稀有',
    epic: '史诗',
    legendary: '传说'
  }
  return rarityMap[rarity] || rarity
}

const getTypeText = (type) => {
  const typeMap = {
    weapon: '武器',
    armor: '防具',
    consumable: '消耗品',
    cosmetic: '装饰品'
  }
  return typeMap[type] || type
}

const getPriceChangeClass = (change) => {
  if (change > 0) return 'price-up'
  if (change < 0) return 'price-down'
  return 'price-stable'
}

const getPriceChangeIcon = (change) => {
  if (change > 0) return '↗'
  if (change < 0) return '↘'
  return '→'
}

onMounted(() => {
  console.log('三角洲行动物品价格页面已加载')
})
</script>

<style scoped>
.delta-items-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #00a1d6 0%, #0080ff 100%);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 30px;
  text-align: center;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 161, 214, 0.3);
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.title-icon {
  font-size: 3rem;
}

.page-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

/* 筛选栏 */
.filter-section {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.filter-container {
  display: flex;
  gap: 20px;
  align-items: end;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.filter-select {
  padding: 10px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
  transition: border-color 0.2s;
}

.filter-select:focus {
  outline: none;
  border-color: #00a1d6;
}

.price-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-input {
  width: 100px;
  padding: 10px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}

.price-input:focus {
  outline: none;
  border-color: #00a1d6;
}

.price-separator {
  color: #666;
  font-weight: 600;
}

.filter-reset {
  padding: 10px 20px;
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-reset:hover {
  background: #e5e5e5;
  color: #333;
}

/* 物品网格 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.item-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.item-card.rarity-common {
  border-color: #a0a0a0;
}

.item-card.rarity-rare {
  border-color: #4a90e2;
}

.item-card.rarity-epic {
  border-color: #9b59b6;
}

.item-card.rarity-legendary {
  border-color: #f39c12;
}

.item-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.item-card:hover .item-img {
  transform: scale(1.05);
}

.rarity-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
}

.rarity-badge.rarity-common {
  background: #a0a0a0;
}

.rarity-badge.rarity-rare {
  background: #4a90e2;
}

.rarity-badge.rarity-epic {
  background: #9b59b6;
}

.rarity-badge.rarity-legendary {
  background: #f39c12;
}

.item-info {
  padding: 20px;
}

.item-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #333;
}

.item-description {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 15px 0;
}

.item-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.8rem;
  color: #999;
}

.stat-value {
  font-weight: 600;
  color: #333;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.current-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-label {
  font-size: 0.8rem;
  color: #666;
}

.price-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #00a1d6;
}

.price-change {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.price-change.price-up {
  background: #e8f5e8;
  color: #52c41a;
}

.price-change.price-down {
  background: #fff2f0;
  color: #ff4d4f;
}

.price-change.price-stable {
  background: #f0f0f0;
  color: #666;
}

.change-icon {
  font-size: 1rem;
}

.item-actions {
  display: flex;
  gap: 10px;
}

.btn {
  flex: 1;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-primary {
  background: #00a1d6;
  color: white;
}

.btn-primary:hover {
  background: #0080ff;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-secondary:hover {
  background: #e5e5e5;
  color: #333;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.page-btn {
  padding: 10px 20px;
  background: #00a1d6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  background: #0080ff;
}

.page-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.page-info {
  color: #666;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .delta-items-container {
    padding: 15px;
  }
  
  .page-header {
    padding: 30px 20px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .items-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .pagination {
    flex-direction: column;
    gap: 15px;
  }
}
</style>
